
<template>
  <div class="tabberWarp" v-if='$route.meta.showTab'>
    <div class="warp">
      <Item
        :txt="item.txt"
        :page="item.page"
        @change="getVal"
        v-for="item in tabbarDes"
        :sel="selected"
        :key="item.text"
        :class="{ liBackground:showTab == item.page}"
      >
        <img :src="item.normalImg" slot="normalImg" />
        <img :src="item.activeImg" slot="activeImg" />
      </Item>
    </div>
  </div>
</template>
<script type="text/javascript">
import Item from "./Item.vue";
// import $ from "jquery";
export default {
  components: {
    Item
  },
  data: function() {
    return {
      selected: "index",
      showTab:"",
      tabbarDes: [
        {
          index: 0,
          txt: "沟通",
          page: "index",
          normalImg: require("../assets/images/ic_2.png"),
          activeImg: require("../assets/images/ic_1.png")
        },
        {
          index: 1,
          txt: "个人工作",
          page: "personjob",
          normalImg: require("../assets/images/ic_4.png"),
          activeImg: require("../assets/images/ic_3.png")
        },
        {
          index: 2,
          txt: "公司",
          page: "company",
          normalImg: require("../assets/images/ic_6.png"),
          activeImg: require("../assets/images/ic_5.png")
        },
        {
          index: 3,
          txt: "我的",
          page: "home",
          normalImg: require("../assets/images/ic_7.png"),
          activeImg: require("../assets/images/ic_8.png")
        }
      ]
    };
  },
  methods: {
    getVal: function(res, index) {
      this.selected = res;
    }
  }
};
</script>
<style type="text/css">
.warp {
  width: 100%;
  border-top: 1px solid #eee;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 0;
  color: #B4B4B4;
}
.warp img {
  width: 20px;
  height: 20px;
}
.tabberWarp img {
  margin-top: 10px;
  margin-bottom: 5px;
}
.tabberWarp {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 5px;
  background: #F4F4F4;
}
.liBackground {
  color: #555555 ;
}
</style>